<template>
	<view class="page">
		<view class="backgroun-gradual-red-little-origin padding-30 b-r-10 line-white">
			<view class="flex justify-between">
				<view>
					<text class="">今日现金收入</text>
					<view class="mt-10">
						<text class="fsize-28">￥</text>
						<text class="fsize-50">{{reportData.incomeTotal}}</text>
					</view>
				</view>
				<view class="store-btn flex" @click="onEmit">
					<text>进入</text>
					<view>
						<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#e94566" size="18"/>
					</view>
					<text>商城</text>
				</view>
			</view>
			<view class="flex justify-between align-center mt-40 text-align-center pl-20 pr-20">
				<view class="" @click="$u.route('/pages/order/list/cardEntryList')">
					<view>￥{{reportData.cardItemOrderAmt}}</view>
					<view class="mt-10 fsize-28 flex">
						<uni-icons custom-prefix="iconfont" type="icon-a-37-kapian" size="22" color="#fff"/>
						<text>卡项订单</text>
					</view>
				</view>
				<view class="" @click="$u.route('/pages/order/list/projectList')">
					<view>￥{{reportData.projectOrderAmt}}</view>
					<view class="mt-10 fsize-28 flex">
						<uni-icons custom-prefix="iconfont" type="icon-xiangmu" size="22" color="#fff"/>
						<text>项目订单</text>
					</view>
				</view>
				<view class="" @click="$u.route('/pages/order/list/productList')">
					<view>￥{{reportData.goodsOrderAmount}}</view>
					<view class="mt-10 fsize-28 flex">
						<uni-icons custom-prefix="iconfont" type="icon-shangpin" size="22" color="#fff"/>
						<text>商品订单</text>
					</view>
				</view>
			</view>
		</view>
		<view class="ugrid mt-30 pb-30">
			<u-grid :col="4" :border="false">
				<u-grid-item 
					v-for="(nItem,nIndex) in navList" 
					:key="nIndex" 
					@click="$u.route(nItem.router)"
				>
					<uni-icons custom-prefix="iconfont" :type="nItem.icon" color="#e45d57" size="32"/>
					<text class="grid-text">{{nItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 经营数据 -->
		<view class="">
			<view class="flex justify-between align-center">
				<view>经营数据</view>
				<u-tabs 
					:list="tabs" 
					:current="currentIx" 
					@click="handleClickTabs" 
					lineColor="#e45d57" 
					:activeStyle="{color:'#e45d57'}" 
				/>
			</view>
			<view class="table-box">
				<u-grid col="2" :border="true">
					<u-grid-item>
						<view class="pb-20 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.arrivalUserNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-daodianditu" color="#aaa" size="18"/>
								<text>到店总客户</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pb-20 pl-80 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.projectNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-daodianditu" color="#aaa" size="18"/>
								<text>总项目数</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 pb-20 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.oldUserNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-navicon-grkh" color="#aaa" size="18"/>
								<text>老客户</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 pb-20 pl-80 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.newUserNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-navicon-grkh" color="#aaa" size="18"/>
								<text>新客户</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pb-20 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.stockholderUsers}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-gerenxinxi" color="#aaa" size="18"/>
								<text>联创客源</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pb-20 pl-80 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.stockholderAmount}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-gerenxinxi" color="#aaa" size="18"/>
								<text>联创业绩</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 pb-20 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.newStockholderNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-xinzeng" color="#aaa" size="18"/>
								<text>新增联创</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 pl-80 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.zilaikeNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-meituan" color="#aaa" size="18"/>
								<text>自来客</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.meituanNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-meituan" color="#aaa" size="18"/>
								<text>美团</text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="pt-20 pl-80 text-align-left w-100">
							<view class="mb-10 ml-10">{{reportData.tiktokNums}}</view>
							<view class="line-gray fsize-28 flex">
								<uni-icons custom-prefix="iconfont" type="icon-douyin" color="#aaa" size="18"/>
								<text>抖音</text>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
	</view>
</template>

<script>
	import setDate from '@/common/date.js'
	export default {
		props:{
			reportData:{}
		},
		data() {
			return {
				showCalendar: false,
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				navList: [
					{ icon: 'icon-kaidan', title: '开单', router: '/pages/order/add/index'},
					{ icon: 'icon-yuyue', title: '预约', router: '/pages/shop/Reservation/list'},
					{ icon: 'icon-order', title: '订单', router: '/pages/order/index'},
					{ icon: 'icon-yuangongguanli', title: '员工', router: '/pages/shop/Staff/index'},
				],
				tabs: [
					{ name: '昨天', value: `${setDate.getYesterday()}到${setDate.getYesterday()}`},
					{ name: '今天', value: `${setDate.getToday(0)}到${setDate.getToday(0)}`},
					{ name: '本月', value: `${setDate.getCurrentMonth().startDate}到${setDate.getCurrentMonth().endDate}`},
					{ name: '自定义', value: 999},
				],
				currentIx: 1,
			}
		},
		created() {
			// this.getStoreOperatingSummary(this.tabs[0].value)
		},
		methods: {
			onEmit(){
				this.$emit('toStore')
			},
			// getStoreOperatingSummary(date){
			// 	this.$reqPost('GetStoreOperatingSummary', {date: date}).then(res=>{
			// 		this.reportData = res.data[0]
			// 	})
			// },
			confirmDate(dates){
				const date = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.tabs[3].name = date
				this.$emit('getReportData', date);
				this.showCalendar = false
			},
			handleClickTabs(e) {
				if(this.currentIx === e.index) return 
				this.currentIx = e.index
				if(this.currentIx===3){
					this.showCalendar = true
				}else {
					this.tabs[3].name = '自定义'
					this.$emit('getReportData', e.value);
				}
				// this.getStoreOperatingSummary(e.value)
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding: 0 20rpx;

		.ugrid {
			.ugrid-title {
				padding: 20rpx 20rpx 0 20rpx;
				font-weight: 600;
			}

			.grid-text {
				font-size: 28rpx;
				padding: 10rpx 0 20rpx 0rpx;
			}
		}

		.table-box {
			margin-top: 30rpx;
			padding: 40rpx 40rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			background: #fff;

		}
	}
</style>
